<template>
	<view class="details-container">
		<view v-for="(table, index) in data.items" :key="index" class="table-container">
			<view class="custom-table">

				<view class="header-row">
					<template v-for="(header, i) in table.header">
						<view v-if="i !== 0" :key="i" class="table-cell header-cell">
							{{ header }}
						</view>
					</template>
				</view>

				<view v-for="(row, rowIndex) in table.data" :key="rowIndex" class="data-row">
					<template v-for="(__, colIndex) in table.header">
						<view :key="colIndex" v-if="colIndex != table.header.length - 1" class="table-cell data-cell">
							<view v-if="isModelColumn(colIndex)">
								{{ row['型号'].title }}
							</view>
							<view v-else-if="hasStorePrice(row, colIndex, table)">
								{{ row[table.header[colIndex + 1]].store_price }}
							</view>
							<view class="mark" v-else-if="isRemarkColumn(colIndex, table)">
								{{ getRemark(row) }}
							</view>
							<view v-else></view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request'

export default {
	styleIsolation: 'isolated',
	data() {
		return {
			data: []
		}
	},
	async onLoad({ id, name }) {
		this.data = await request.get('/details?id=' + id)
		uni.setNavigationBarTitle({
			title: name
		})
	},
	methods: {
		isModelColumn(colIndex) {
			return colIndex === 0;
		},
		hasStorePrice(row, colIndex, table) {
			return row[table.header[colIndex + 1]]?.t;
		},
		isRemarkColumn(colIndex, table) {
			return table.header[colIndex + 1] === '备注';
		},
		getRemark(row) {
			return this.data.ext.config.bz_ids['bz_' + row['排序'].product_id];
		}
	}
}
</script>

<style>

.details-container {
	background-color: #121212;
	min-height: 100vh;
	padding: 20rpx;
}

.table-container {
	margin-bottom: 40rpx;
	overflow-x: hidden;
	font-size: 18rpx;
	border: 1px solid #3a3a3a;
	background-color: #1e1e1e;
	width: 100%;
	border-radius: 16rpx;
}

.custom-table {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.header-row,
.data-row {
	display: flex;
	flex-direction: row;
}

.table-cell {
	flex: 1;
	text-align: center;
	white-space: normal;
}

.custom-table .data-row:not(:last-child) {
	border-bottom: 1px solid #3a3a3a;
}

.header-cell {
	font-weight: bold;
	background-color: #292929;
	color: #ffffff;
	border-bottom: 1px solid #3a3a3a;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16rpx 0;
}

.data-cell {
	background-color: #1e1e1e;
	color: #e0e0e0;
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-table .data-row .data-cell:first-child {
	flex: none;
	flex-basis: 89rpx;
}

.custom-table .data-row .data-cell:last-child {
	flex: none;
	flex-basis: 89rpx;
	word-break: break-all;		
	white-space: normal;
}

.custom-table .header-row .header-cell:first-child {
	flex: none;
	flex-basis: 125rpx;
}

.custom-table .header-row .header-cell:last-child {
	flex: none;
	flex-basis: 125rpx;
	word-break: break-all;		
	white-space: normal;
}

.custom-table .data-cell:not(:first-child) {
	border-left: 1px solid #3a3a3a;
}

.custom-table .header-cell:not(:first-child) {
	border-left: 1px solid #3a3a3a;
}

.data-row:hover {
	background-color: #2a2a2a;
	transition: background-color 0.3s ease;
}
</style>
